import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import StatPanel from './StatPanel.js';

export default class TaskPanel extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          tasks:[]
        }
    }

    componentDidMount() {

        let projName = null;
        if(this.props.project != null){
           projName = this.props.project;
        }
        let me = this;
        fetch('http://localhost:8080/task/index', {
            method: 'POST',
            mode: 'cors',
            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
            body: JSON.stringify({ projectName: projName})
        })
        .then(res => res.json())
        .catch(error => console.error('Fetch Error:', error))
        .then(function (result) {
          me.setState({
              tasks:result.data
          })
        });
    }

	render(){
		return (
		<div class="page page-limited">
		    <div class="code-components">
		        <div class="boxed-group boxed-group-inner spacer-top">
                    <table class="data zebra">
                        <thead>
                            <tr class="code-components-header">
                                <th class="thin nowrap text-right code-components-cell">项目名称</th>
                                <th class="thin nowrap text-right code-components-cell">检测时间</th>
                                <th class="thin nowrap text-right code-components-cell">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                           {this.state.tasks.map((task) => {
                               let taskId = task.id;
                               let data = {taskId:taskId};
                               let path = {
                                 pathname:'/stat',
                                 query:data,
                               }
                               return (
                                 <tr>
                                    <td class="thin nowrap text-right"><div class="code-components-cell"><span>{task.projectName}</span></div></td>
                                    <td class="thin nowrap text-right"><div class="code-components-cell"><span>{task.createTime}</span></div></td>
                                    <td class="thin nowrap text-right"><div class="code-components-cell">
                                        <Link to={path}><button>详情</button></Link>
                                    </div></td>
                                 </tr>
                               )
                            })}
                        </tbody>
                    </table>
		        </div>
            </div>
        </div>
		);
	}
}